{extend name='api/view/main'}

{block name='content'}
<div class="header"><span>{:date('H:i')}</span></div>
<div class="container">
    <div class="logo">A</div>
    <div class="content arrow">
        <a class="icon icon-volume left-text"></a>
        <a href="javascript:void(0)" id="AudioBtn" class="icon icon-pause"></a>
        <audio id="AudioSrc">
            <source src="{$url|default=''}">
        </audio>
    </div>
</div>
<script>
    (function (audio, button) {
        audio.onerror = function () {
            button.className = 'icon icon-play';
        };
        button.onclick = function () {
            audio.paused ? audio.play() : audio.pause()
        };
        button.onapply = function () {
            button.className = audio.paused ? 'icon icon-play' : 'icon icon-pause';
        };
        setInterval(button.onapply, 500), button.onapply();
    })(document.getElementById('AudioSrc'), document.getElementById('AudioBtn'));
</script>
{/block}

{block name='style'}
<style>
    .left-text {
        margin: 0 !important;
        color: #ccc !important
    }

    .icon {
        color: #666;
        font-size: 1.5rem;
        margin-left: 2.5rem;
        line-height: 1.5rem
    }
</style>
{/block}